<template>
	<div class="docker-command-generator">
		<!-- 主要工作区域 -->
		<div class="main-workspace">
			<!-- 模板选择区域 -->
			<div class="template-section">
				<div class="workspace-card template-card">
					<div class="card-content">
						<div class="section-header">
							<h3 class="template-title">快速模板</h3>
							<span class="template-subtitle">
								选择预设模板快速生成 Docker 命令
							</span>
						</div>
						<div class="template-grid">
							<div
								v-for="template in templateOptions"
								:key="template.value"
								class="template-item"
								@click="applyTemplate(template.value)">
								<div class="template-icon">
									<component :is="template.icon" />
								</div>
								<div class="template-info">
									<h4 class="template-name">
										{{ template.label }}
									</h4>
									<p class="template-desc">
										{{ template.description }}
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="workspace-grid">
				<!-- 左侧配置区域 -->
				<div class="workspace-card input-card">
					<div class="card-content">
						<!-- 基本配置 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">基本配置</h4>
							</div>
							<div class="config-grid">
								<n-form-item label="容器名称" required>
									<n-input
										v-model:value="config.name"
										placeholder="例如: my-app"
										clearable />
									<template #feedback>
										<span class="field-hint">
											为容器指定一个唯一的名称
										</span>
									</template>
								</n-form-item>
								<n-form-item label="镜像名称" required>
									<n-input
										v-model:value="config.image"
										placeholder="例如: nginx:latest"
										clearable />
									<template #feedback>
										<span class="field-hint">
											Docker镜像名称，支持标签
										</span>
									</template>
								</n-form-item>
								<n-form-item label="运行命令">
									<n-input
										v-model:value="config.command"
										placeholder="例如: /bin/bash"
										clearable />
									<template #feedback>
										<span class="field-hint">
											容器启动后执行的命令
										</span>
									</template>
								</n-form-item>
								<n-form-item label="主机名">
									<n-input
										v-model:value="config.hostname"
										placeholder="例如: my-container"
										clearable />
									<template #feedback>
										<span class="field-hint">
											容器的主机名
										</span>
									</template>
								</n-form-item>
							</div>
						</div>

						<!-- 运行选项 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">运行选项</h4>
							</div>
							<div class="options-row">
								<div class="option-item">
									<label class="option-label">
										强制拉取镜像
									</label>
									<n-switch
										v-model:value="config.pull"
										size="small" />
								</div>
								<div class="option-item">
									<label class="option-label">
										后台运行 (-d)
									</label>
									<n-switch
										v-model:value="config.detached"
										size="small" />
								</div>
								<div class="option-item">
									<label class="option-label">
										伪终端 (-t)
									</label>
									<n-switch
										v-model:value="config.tty"
										size="small" />
								</div>
								<div class="option-item">
									<label class="option-label">
										标准输入 (-i)
									</label>
									<n-switch
										v-model:value="config.interactive"
										size="small" />
								</div>
								<div class="option-item">
									<label class="option-label">特权模式</label>
									<n-switch
										v-model:value="config.privileged"
										size="small" />
								</div>
							</div>
						</div>

						<!-- 端口映射 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">端口映射</h4>
								<n-button
									@click="addPort"
									type="primary"
									size="small"
									circle>
									+
								</n-button>
							</div>
							<div
								v-if="config.ports.length === 0"
								class="empty-state">
								暂无端口映射，点击 + 添加
							</div>
							<div
								v-for="(port, index) in config.ports"
								:key="index"
								class="dynamic-item">
								<n-input
									v-model:value="port.host"
									placeholder="主机端口"
									size="small" />
								<span class="arrow">→</span>
								<n-input
									v-model:value="port.container"
									placeholder="容器端口"
									size="small" />
								<n-button
									@click="removePort(index)"
									type="error"
									size="small"
									circle>
									×
								</n-button>
							</div>
						</div>

						<!-- 挂载卷 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">挂载卷</h4>
								<n-button
									@click="addVolume"
									type="primary"
									size="small"
									circle>
									+
								</n-button>
							</div>
							<div
								v-if="config.volumes.length === 0"
								class="empty-state">
								暂无挂载卷，点击 + 添加
							</div>
							<div
								v-for="(volume, index) in config.volumes"
								:key="index"
								class="dynamic-item">
								<n-input
									v-model:value="volume.host"
									placeholder="主机路径"
									size="small" />
								<span class="arrow">→</span>
								<n-input
									v-model:value="volume.container"
									placeholder="容器路径"
									size="small" />
								<n-select
									v-model:value="volume.mode"
									:options="volumeModeOptions"
									size="small"
									style="width: 80px" />
								<n-button
									@click="removeVolume(index)"
									type="error"
									size="small"
									circle>
									×
								</n-button>
							</div>
						</div>

						<!-- 环境变量 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">环境变量</h4>
								<n-button
									@click="addEnv"
									type="primary"
									size="small"
									circle>
									+
								</n-button>
							</div>
							<div
								v-if="config.environment.length === 0"
								class="empty-state">
								暂无环境变量，点击 + 添加
							</div>
							<div
								v-for="(env, index) in config.environment"
								:key="index"
								class="dynamic-item">
								<n-input
									v-model:value="env.key"
									placeholder="变量名"
									size="small" />
								<span class="arrow">=</span>
								<n-input
									v-model:value="env.value"
									placeholder="变量值"
									size="small" />
								<n-button
									@click="removeEnv(index)"
									type="error"
									size="small"
									circle>
									×
								</n-button>
							</div>
						</div>

						<!-- 高级选项 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">高级选项</h4>
							</div>
							<div class="config-grid">
								<n-form-item label="网络模式">
									<n-select
										v-model:value="config.network"
										:options="networkOptions"
										placeholder="选择网络模式" />
									<template #feedback>
										<span class="field-hint">
											容器的网络模式
										</span>
									</template>
								</n-form-item>
								<n-form-item label="重启策略">
									<n-select
										v-model:value="config.restart"
										:options="restartOptions"
										placeholder="选择重启策略" />
									<template #feedback>
										<span class="field-hint">
											容器退出时的重启策略
										</span>
									</template>
								</n-form-item>
								<n-form-item label="CPU权重">
									<n-input
										v-model:value="config.cpuShares"
										placeholder="例如: 1024"
										clearable />
									<template #feedback>
										<span class="field-hint">
											CPU权重，数值越大优先级越高
										</span>
									</template>
								</n-form-item>
								<n-form-item label="内存限制">
									<n-input
										v-model:value="config.memory"
										placeholder="例如: 512m"
										clearable />
									<template #feedback>
										<span class="field-hint">
											内存限制，支持 b、k、m、g 单位
										</span>
									</template>
								</n-form-item>
								<n-form-item label="共享内存">
									<n-input
										v-model:value="config.shmSize"
										placeholder="例如: 64m"
										clearable />
									<template #feedback>
										<span class="field-hint">
											共享内存大小
										</span>
									</template>
								</n-form-item>
								<n-form-item label="用户">
									<n-input
										v-model:value="config.user"
										placeholder="例如: root:root"
										clearable />
									<template #feedback>
										<span class="field-hint">
											运行容器的用户和组
										</span>
									</template>
								</n-form-item>
								<n-form-item label="工作目录">
									<n-input
										v-model:value="config.workdir"
										placeholder="例如: /app"
										clearable />
									<template #feedback>
										<span class="field-hint">
											容器内的工作目录
										</span>
									</template>
								</n-form-item>
								<n-form-item label="日志最大大小">
									<n-input
										v-model:value="config.logMaxSize"
										placeholder="例如: 1g"
										clearable />
									<template #feedback>
										<span class="field-hint">
											单个日志文件的最大大小，支持
											b、k、m、g 单位
										</span>
									</template>
								</n-form-item>
								<n-form-item label="日志文件数量">
									<n-input
										v-model:value="config.logMaxFile"
										placeholder="例如: 3"
										clearable />
									<template #feedback>
										<span class="field-hint">
											保留的日志文件最大数量
										</span>
									</template>
								</n-form-item>
							</div>
						</div>

						<!-- 域名解析 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">域名解析</h4>
								<n-button
									@click="addHost"
									type="primary"
									size="small"
									circle>
									+
								</n-button>
							</div>
							<div
								v-if="config.hosts.length === 0"
								class="empty-state">
								暂无域名解析，点击 + 添加
							</div>
							<div
								v-for="(host, index) in config.hosts"
								:key="index"
								class="dynamic-item">
								<n-input
									v-model:value="host.hostname"
									placeholder="域名"
									size="small" />
								<span class="arrow">→</span>
								<n-input
									v-model:value="host.ip"
									placeholder="IP地址"
									size="small" />
								<n-button
									@click="removeHost(index)"
									type="error"
									size="small"
									circle>
									×
								</n-button>
							</div>
						</div>

						<!-- 标签 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">标签</h4>
								<n-button
									@click="addLabel"
									type="primary"
									size="small"
									circle>
									+
								</n-button>
							</div>
							<div
								v-if="config.labels.length === 0"
								class="empty-state">
								暂无标签，点击 + 添加
							</div>
							<div
								v-for="(label, index) in config.labels"
								:key="index"
								class="dynamic-item">
								<n-input
									v-model:value="label.key"
									placeholder="标签名"
									size="small" />
								<span class="arrow">=</span>
								<n-input
									v-model:value="label.value"
									placeholder="标签值"
									size="small" />
								<n-button
									@click="removeLabel(index)"
									type="error"
									size="small"
									circle>
									×
								</n-button>
							</div>
						</div>
					</div>
				</div>

				<!-- 右侧结果区域 -->
				<div class="workspace-card output-card">
					<div class="card-content">
						<!-- 生成的命令 -->
						<div class="command-output-section">
							<div class="section-header">
								<h5 class="output-title">生成的 Docker 命令</h5>
								<div class="output-badge">docker run</div>
							</div>
							<n-input
								v-model:value="generatedCommand"
								type="textarea"
								:rows="16"
								placeholder="配置参数后将在这里显示生成的 Docker 命令..."
								readonly
								class="command-output" />
						</div>

						<!-- 操作按钮 -->
						<div class="action-buttons">
							<n-button
								@click="clearAll"
								size="small"
								class="clear-btn">
								<template #icon>
									<svg
										width="16"
										height="16"
										viewBox="0 0 24 24"
										fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M3 6H5H21"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round" />
										<path
											d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round" />
									</svg>
								</template>
								清空
							</n-button>
							<n-button
								v-if="generatedCommand"
								@click="copyResult"
								size="small"
								type="primary">
								<template #icon>
									<svg
										width="16"
										height="16"
										viewBox="0 0 24 24"
										fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M16 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V16"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round" />
										<path
											d="M15 2H9C7.89543 2 7 2.89543 7 4V14C7 15.1046 7.89543 16 9 16H15C16.1046 16 17 15.1046 17 14V4C17 2.89543 16.1046 2 15 2Z"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round" />
									</svg>
								</template>
								复制
							</n-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useCopy } from '@/composable/copy';

// 图标组件
const NginxIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#009639" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 17L12 22L22 17" stroke="#009639" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 12L12 17L22 12" stroke="#009639" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
		</svg>
	`
};

const MysqlIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M16 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H8" stroke="#4479A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M8 2H16V4H8V2Z" stroke="#4479A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
		</svg>
	`
};

const RedisIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<circle cx="12" cy="12" r="10" stroke="#DC382D" stroke-width="2"/>
			<path d="M8 12H16" stroke="#DC382D" stroke-width="2" stroke-linecap="round"/>
			<path d="M12 8V16" stroke="#DC382D" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

const PostgresIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#336791" stroke-width="2"/>
			<path d="M12 8V16" stroke="#336791" stroke-width="2" stroke-linecap="round"/>
			<path d="M8 12H16" stroke="#336791" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

const PythonIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M14.25 2.5C13.0074 2.5 12 3.50736 12 4.75V6.5H8.75C6.67893 6.5 5 8.17893 5 10.25V13.75C5 15.8211 6.67893 17.5 8.75 17.5H10.5V19.25C10.5 20.4926 11.5074 21.5 12.75 21.5H15.25C16.4926 21.5 17.5 20.4926 17.5 19.25V17.5H19.25C21.3211 17.5 23 15.8211 23 13.75V10.25C23 8.17893 21.3211 6.5 19.25 6.5H17.5V4.75C17.5 3.50736 16.4926 2.5 15.25 2.5H14.25Z" stroke="#3776ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
		</svg>
	`
};

const JavaIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M8.5 2C8.5 2 9.5 2.5 9.5 4.5C9.5 6.5 8.5 7 8.5 7C8.5 7 9.5 6.5 9.5 8.5C9.5 10.5 8.5 11 8.5 11C8.5 11 9.5 10.5 9.5 12.5C9.5 14.5 8.5 15 8.5 15C8.5 15 9.5 14.5 9.5 16.5C9.5 18.5 8.5 19 8.5 19C8.5 19 7.5 18.5 7.5 16.5C7.5 14.5 8.5 14 8.5 14C8.5 14 7.5 14.5 7.5 12.5C7.5 10.5 8.5 10 8.5 10C8.5 10 7.5 10.5 7.5 8.5C7.5 6.5 8.5 6 8.5 6C8.5 6 7.5 6.5 7.5 4.5C7.5 2.5 8.5 2 8.5 2Z" stroke="#f89820" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
		</svg>
	`
};

const GolangIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2C6.48 2 2 6.48 2 12S6.48 22 12 22 22 17.52 22 12 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20Z" stroke="#00add8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M8 12H16" stroke="#00add8" stroke-width="2" stroke-linecap="round"/>
			<path d="M12 8V16" stroke="#00add8" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

const NodejsIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2C6.48 2 2 6.48 2 12S6.48 22 12 22 22 17.52 22 12 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20Z" stroke="#339933" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M8 12H16" stroke="#339933" stroke-width="2" stroke-linecap="round"/>
			<path d="M12 8V16" stroke="#339933" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

const { copy } = useCopy();

// 配置状态
const config = ref({
	name: '',
	image: '',
	command: '',
	hostname: '',
	pull: false,
	detached: true,
	tty: true,
	interactive: true,
	privileged: false,
	ports: [] as Array<{ host: string; container: string }>,
	volumes: [] as Array<{ host: string; container: string; mode: string }>,
	environment: [] as Array<{ key: string; value: string }>,
	network: '',
	restart: '',
	cpuShares: '',
	memory: '',
	shmSize: '',
	user: '',
	workdir: '',
	logMaxSize: '',
	logMaxFile: '',
	hosts: [] as Array<{ hostname: string; ip: string }>,
	labels: [] as Array<{ key: string; value: string }>
});

// 模板配置
const templates = {
	nginx: {
		name: 'fsx-nginx',
		image: 'registry.cmri.cn/baseimages/public/nginx:1.28.0-amd64',
		command: '',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [{ host: '8082', container: '8088' }],
		volumes: [
			{
				host: '/data/nginx/conf.d',
				container: '/etc/nginx/conf.d',
				mode: 'rw'
			},
			{
				host: '/data/nginx/conf/nginx.conf',
				container: '/etc/nginx/nginx.conf',
				mode: 'rw'
			},
			{
				host: '/data/nginx/log/',
				container: '/data/nginx/log/',
				mode: 'rw'
			},
			{
				host: '/data/nginx/dist',
				container: '/var/www/html/dist',
				mode: 'rw'
			}
		],
		environment: [],
		network: '',
		restart: '',
		cpuShares: '',
		memory: '',
		shmSize: '',
		user: '',
		workdir: '/etc/nginx',
		logMaxSize: '1g',
		logMaxFile: '3',
		hosts: [] as Array<{ hostname: string; ip: string }>,
		labels: []
	},
	mysql: {
		name: 'mysql-server',
		image: 'mysql:8.0',
		command: '',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [{ host: '3306', container: '3306' }],
		volumes: [
			{
				host: '/data/mysql/data',
				container: '/var/lib/mysql',
				mode: 'rw'
			},
			{
				host: '/data/mysql/config',
				container: '/etc/mysql/conf.d',
				mode: 'rw'
			}
		],
		environment: [
			{ key: 'MYSQL_ROOT_PASSWORD', value: 'root123' },
			{ key: 'MYSQL_DATABASE', value: 'myapp' }
		],
		network: '',
		restart: 'unless-stopped',
		cpuShares: '',
		memory: '1g',
		shmSize: '',
		user: '',
		workdir: '',
		logMaxSize: '100m',
		logMaxFile: '5',
		hosts: [] as Array<{ hostname: string; ip: string }>,
		labels: []
	},
	redis: {
		name: 'redis-server',
		image: 'redis:7-alpine',
		command: '',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [{ host: '6379', container: '6379' }],
		volumes: [{ host: '/data/redis/data', container: '/data', mode: 'rw' }],
		environment: [],
		network: '',
		restart: 'unless-stopped',
		cpuShares: '',
		memory: '512m',
		shmSize: '',
		user: '',
		workdir: '',
		logMaxSize: '50m',
		logMaxFile: '3',
		hosts: [] as Array<{ hostname: string; ip: string }>,
		labels: []
	},
	postgres: {
		name: 'postgres-server',
		image: 'postgres:15',
		command: '',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [{ host: '5432', container: '5432' }],
		volumes: [
			{
				host: '/data/postgres/data',
				container: '/var/lib/postgresql/data',
				mode: 'rw'
			}
		],
		environment: [
			{ key: 'POSTGRES_DB', value: 'myapp' },
			{ key: 'POSTGRES_USER', value: 'postgres' },
			{ key: 'POSTGRES_PASSWORD', value: 'postgres123' }
		],
		network: '',
		restart: 'unless-stopped',
		cpuShares: '',
		memory: '1g',
		shmSize: '',
		user: '',
		workdir: '',
		logMaxSize: '100m',
		logMaxFile: '5',
		hosts: [] as Array<{ hostname: string; ip: string }>,
		labels: []
	},
	python: {
		name: 'python-dev',
		image: 'registry.cmri.cn/baseimages/public/python:3.11.13-amd64',
		command: 'bash',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [{ host: '8000', container: '8000' }],
		volumes: [
			{ host: '/data/python/app', container: '/app', mode: 'rw' },
			{
				host: '/data/python/requirements.txt',
				container: '/app/requirements.txt',
				mode: 'rw'
			}
		],
		environment: [],
		network: '',
		restart: 'unless-stopped',
		cpuShares: '',
		memory: '512m',
		shmSize: '',
		user: '',
		workdir: '/app',
		logMaxSize: '100m',
		logMaxFile: '3',
		hosts: [] as Array<{ hostname: string; ip: string }>,
		labels: []
	},
	java: {
		name: 'java-dev',
		image: 'registry.cmri.cn/baseimages/public/java:17.0.16-amd64',
		command: 'bash',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [{ host: '8080', container: '8080' }],
		volumes: [
			{
				host: '/data/java/src',
				container: '/app',
				mode: 'rw'
			}
		],
		environment: [],
		network: '',
		restart: 'unless-stopped',
		cpuShares: '',
		memory: '1g',
		shmSize: '',
		user: '',
		workdir: '/app',
		logMaxSize: '100m',
		logMaxFile: '3',
		hosts: [] as Array<{ hostname: string; ip: string }>,
		labels: []
	},
	golang: {
		name: 'golang-dev',
		image: 'registry.cmri.cn/baseimages/public/golang:1.15.7-amd64',
		command: 'bash',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [{ host: '8080', container: '8080' }],
		volumes: [
			{ host: '/data/golang/src', container: '/app', mode: 'rw' },
			{
				host: '/data/golang/go.mod',
				container: '/app/go.mod',
				mode: 'rw'
			}
		],
		environment: [],
		network: '',
		restart: 'unless-stopped',
		cpuShares: '',
		memory: '512m',
		shmSize: '',
		user: '',
		workdir: '/app',
		logMaxSize: '100m',
		logMaxFile: '3',
		hosts: [] as Array<{ hostname: string; ip: string }>,
		labels: []
	},
	nodejs: {
		name: 'nodejs-dev',
		image: 'registry.cmri.cn/baseimages/public/node:18.20.8-amd64',
		command: 'bash',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [{ host: '3000', container: '3000' }],
		volumes: [
			{ host: '/data/nodejs/src', container: '/app', mode: 'rw' },
			{
				host: '/data/nodejs/package.json',
				container: '/app/package.json',
				mode: 'rw'
			}
		],
		environment: [],
		network: '',
		restart: 'unless-stopped',
		cpuShares: '',
		memory: '512m',
		shmSize: '',
		user: '',
		workdir: '/app',
		logMaxSize: '100m',
		logMaxFile: '3',
		hosts: [] as Array<{ hostname: string; ip: string }>,
		labels: []
	}
};

// 模板选项
const templateOptions = [
	{
		label: 'Nginx',
		value: 'nginx',
		description: 'Web服务器',
		icon: 'NginxIcon'
	},
	{
		label: 'MySQL',
		value: 'mysql',
		description: '数据库',
		icon: 'MysqlIcon'
	},
	{
		label: 'Redis',
		value: 'redis',
		description: '缓存',
		icon: 'RedisIcon'
	},
	{
		label: 'PostgreSQL',
		value: 'postgres',
		description: '数据库',
		icon: 'PostgresIcon'
	},
	{
		label: 'Python',
		value: 'python',
		description: '开发环境',
		icon: 'PythonIcon'
	},
	{
		label: 'Java',
		value: 'java',
		description: '开发环境',
		icon: 'JavaIcon'
	},
	{
		label: 'Golang',
		value: 'golang',
		description: '开发环境',
		icon: 'GolangIcon'
	},
	{
		label: 'Node.js',
		value: 'nodejs',
		description: '开发环境',
		icon: 'NodejsIcon'
	}
];

// 选项配置
const volumeModeOptions = [
	{ label: '读写', value: 'rw' },
	{ label: '只读', value: 'ro' }
];

const networkOptions = [
	{ label: '默认', value: '' },
	{ label: '桥接', value: 'bridge' },
	{ label: '主机', value: 'host' },
	{ label: '无', value: 'none' }
];

const restartOptions = [
	{ label: '不重启', value: '' },
	{ label: '总是重启', value: 'always' },
	{ label: '失败时重启', value: 'on-failure' },
	{ label: '除非停止', value: 'unless-stopped' }
];

// 生成的命令
const generatedCommand = computed(() => {
	if (!config.value.image) {
		return '';
	}

	const parts: string[] = ['docker run'];

	if (config.value.pull) {
		parts.push('--pull always');
	}

	// 组合 -dit 参数
	const flags = [];
	if (config.value.detached) flags.push('d');
	if (config.value.interactive) flags.push('i');
	if (config.value.tty) flags.push('t');
	if (flags.length > 0) {
		parts.push(`-${flags.join('')}`);
	}

	if (config.value.name) {
		parts.push(`--name "${config.value.name}"`);
	}

	if (config.value.hostname) {
		parts.push(`--hostname "${config.value.hostname}"`);
	}

	if (config.value.user) {
		parts.push(`--user "${config.value.user}"`);
	}

	if (config.value.workdir) {
		parts.push(`--workdir "${config.value.workdir}"`);
	}

	if (config.value.network) {
		parts.push(`--network ${config.value.network}`);
	}

	if (config.value.restart) {
		parts.push(`--restart ${config.value.restart}`);
	}

	if (config.value.cpuShares) {
		parts.push(`--cpu-shares ${config.value.cpuShares}`);
	}

	if (config.value.memory) {
		parts.push(`--memory ${config.value.memory}`);
	}

	if (config.value.shmSize) {
		parts.push(`--shm-size ${config.value.shmSize}`);
	}

	if (config.value.logMaxSize) {
		parts.push(`--log-opt max-size=${config.value.logMaxSize}`);
	}

	if (config.value.logMaxFile) {
		parts.push(`--log-opt max-file=${config.value.logMaxFile}`);
	}

	config.value.hosts.forEach((host) => {
		if (host.hostname && host.ip) {
			parts.push(`--add-host "${host.hostname}:${host.ip}"`);
		}
	});

	if (config.value.privileged) {
		parts.push('--privileged');
	}

	config.value.ports.forEach((port) => {
		if (port.host && port.container) {
			parts.push(`-p ${port.host}:${port.container}`);
		}
	});

	config.value.volumes.forEach((volume) => {
		if (volume.host && volume.container) {
			const mode = volume.mode ? `:${volume.mode}` : '';
			parts.push(`-v "${volume.host}:${volume.container}${mode}"`);
		}
	});

	config.value.environment.forEach((env) => {
		if (env.key && env.value) {
			parts.push(`-e "${env.key}=${env.value}"`);
		}
	});

	config.value.labels.forEach((label) => {
		if (label.key && label.value) {
			parts.push(`--label "${label.key}=${label.value}"`);
		}
	});

	parts.push(config.value.image);

	if (config.value.command) {
		parts.push(config.value.command);
	}

	return parts.join(' ');
});

// 动态列表操作
const addPort = () => {
	config.value.ports.push({ host: '', container: '' });
};

const removePort = (index: number) => {
	config.value.ports.splice(index, 1);
};

const addVolume = () => {
	config.value.volumes.push({ host: '', container: '', mode: 'rw' });
};

const removeVolume = (index: number) => {
	config.value.volumes.splice(index, 1);
};

const addEnv = () => {
	config.value.environment.push({ key: '', value: '' });
};

const removeEnv = (index: number) => {
	config.value.environment.splice(index, 1);
};

const addHost = () => {
	config.value.hosts.push({ hostname: '', ip: '' });
};

const removeHost = (index: number) => {
	config.value.hosts.splice(index, 1);
};

const addLabel = () => {
	config.value.labels.push({ key: '', value: '' });
};

const removeLabel = (index: number) => {
	config.value.labels.splice(index, 1);
};

// 应用模板
const applyTemplate = (templateKey: string) => {
	if (templateKey && templates[templateKey as keyof typeof templates]) {
		const template = templates[templateKey as keyof typeof templates];
		config.value = {
			name: template.name,
			image: template.image,
			command: template.command,
			hostname: template.hostname,
			pull: template.pull,
			detached: template.detached,
			tty: template.tty,
			interactive: template.interactive,
			privileged: template.privileged,
			ports: [...template.ports],
			volumes: [...template.volumes],
			environment: [...template.environment],
			network: template.network,
			restart: template.restart,
			cpuShares: template.cpuShares,
			memory: template.memory,
			shmSize: template.shmSize,
			user: template.user,
			workdir: template.workdir,
			logMaxSize: template.logMaxSize,
			logMaxFile: template.logMaxFile,
			hosts: [...template.hosts],
			labels: [...template.labels]
		};
	}
};

// 清空所有配置
const clearAll = () => {
	config.value = {
		name: '',
		image: '',
		command: '',
		hostname: '',
		pull: false,
		detached: true,
		tty: true,
		interactive: true,
		privileged: false,
		ports: [],
		volumes: [],
		environment: [],
		network: '',
		restart: '',
		cpuShares: '',
		memory: '',
		shmSize: '',
		user: '',
		workdir: '',
		logMaxSize: '',
		logMaxFile: '',
		hosts: [],
		labels: []
	};
};

// 复制结果
const copyResult = async () => {
	if (generatedCommand.value) {
		await copy(generatedCommand.value);
	}
};
</script>

<style scoped>
.docker-command-generator {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 2rem;
}

.main-workspace {
	max-width: 1600px;
	margin: 0 auto;
}

.template-section {
	margin-bottom: 2rem;
}

.template-card {
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	border: 1px solid #cbd5e0;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.template-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
	color: #2d3748;
}

.template-subtitle {
	font-size: 0.9rem;
	color: #718096;
	margin-top: 0.25rem;
}

.template-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.template-item {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.template-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #667eea, #764ba2);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.template-item:hover {
	border-color: #667eea;
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
}

.template-item:hover::before {
	opacity: 1;
}

.template-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	margin-bottom: 0.75rem;
	transition: all 0.3s ease;
}

.template-item:hover .template-icon {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color: #667eea;
	transform: scale(1.05);
}

.template-item:hover .template-icon svg {
	filter: brightness(0) invert(1);
}

.template-info {
	text-align: center;
}

.template-name {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.25rem 0;
	color: #2d3748;
	transition: color 0.3s ease;
}

.template-item:hover .template-name {
	color: #667eea;
}

.template-desc {
	font-size: 0.75rem;
	margin: 0;
	color: #718096;
	line-height: 1.3;
	transition: color 0.3s ease;
}

.template-item:hover .template-desc {
	color: #4a5568;
}

.workspace-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 2rem;
	align-items: start;
}

.workspace-card {
	background: white;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.clear-btn {
	background: #fed7d7;
	border-color: #feb2b2;
	color: #c53030;
}

.clear-btn:hover {
	background: #feb2b2;
	border-color: #fc8181;
}

.card-content {
	padding: 1.5rem;
}

.config-section {
	margin-bottom: 2rem;
}

.config-section:last-child {
	margin-bottom: 0;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.section-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2d3748;
	margin: 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #e2e8f0;
}

.field-hint {
	font-size: 0.75rem;
	color: #718096;
	margin-top: 0.25rem;
	display: block;
}

.options-row {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
	background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	flex-wrap: wrap;
}

.option-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	flex: 1;
	min-width: 120px;
}

.option-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #2d3748;
	margin: 0;
	text-align: center;
}

.config-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.command-output-section {
	margin-bottom: 1.5rem;
}

.output-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #2d3748;
}

.output-badge {
	background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 600;
}

.command-output {
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 0.875rem;
	line-height: 1.5;
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

.action-buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
}

.empty-state {
	text-align: center;
	color: #888;
	padding: 15px;
	border: 1px dashed rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	margin-top: 10px;
	background: #f7fafc;
}

.dynamic-item {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	margin-bottom: 8px;
}

.dynamic-item .arrow {
	font-weight: bold;
	color: #667eea;
	flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
	.workspace-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.config-grid {
		grid-template-columns: 1fr;
	}

	.template-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 0.75rem;
	}

	.template-item {
		padding: 0.75rem;
	}

	.template-icon {
		width: 36px;
		height: 36px;
		margin-bottom: 0.5rem;
	}

	.template-name {
		font-size: 0.85rem;
	}

	.template-desc {
		font-size: 0.7rem;
	}
}

@media (max-width: 768px) {
	.docker-command-generator {
		padding: 1rem;
	}

	.template-grid {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 0.5rem;
	}

	.template-item {
		padding: 0.5rem;
	}

	.template-icon {
		width: 32px;
		height: 32px;
		margin-bottom: 0.25rem;
	}

	.template-name {
		font-size: 0.8rem;
		margin-bottom: 0.125rem;
	}

	.template-desc {
		font-size: 0.65rem;
	}

	.card-header {
		flex-direction: column;
		gap: 1rem;
		align-items: stretch;
	}

	.card-actions {
		justify-content: center;
	}

	.options-row {
		flex-direction: column;
		align-items: stretch;
	}

	.option-item {
		flex-direction: row;
		justify-content: space-between;
		min-width: auto;
	}
}
</style>
